<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    #customerform{width: 100%;height: 498px;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #bmap {width: 100%;height: 498px;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .anchorBL {
        display: none;
    }
</style>
<form id="customerform" method="post" style="padding-top:1px">
    <input type="hidden" id="id" name="id" >
    <input type="hidden" id="boardlng" name="boardlng">
    <input type="hidden" id="boardlat" name="boardlat">
    <div id="bmap"></div>
</form>

<script>
    var centermarker;
    //DOM加载完之后才能调用，否则经纬度获取不到。
    setTimeout(function () {
        var boardlng = $("#boardlng").val();
        var boardlat = $("#boardlat").val();
        // 百度地图API功能
        var map = new BMap.Map("bmap");    // 创建Map实例

        //map.centerAndZoom("泰州", 15);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));
        var myIconD = new BMap.Icon('/img/map/dw.png',new BMap.Size(32,32));
        map.setCurrentCity("泰州");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setMapStyle({style:"light"});
        //-----------------------------------------------------------------------------------
        //如果lng 或 lat一个为0 说明没有定位，显示为地图中心
        //-----------------------------------------------------------------------------------
        if(boardlat=='' || boardlat=="0"){
            boardlng="119.917167";
            boardlat="32.462906";
            $("#boardlng").val(boardlng);
            $("#boardlat").val(boardlat);
        }

        var poincenter = new BMap.Point(boardlng, boardlat);
        var label = new BMap.Label('可拖动', {position:poincenter,offset:new BMap.Size(16,32)});
        label.setStyle({transform: 'translateX(-50%)'});
        centermarker = new BMap.Marker(poincenter, {icon: myIconD,offset:new BMap.Size(0,0)});
        centermarker.setLabel(label);
        map.centerAndZoom(poincenter, 15);
        map.addOverlay(centermarker);               // 将标注添加到地图中
        centermarker.enableDragging();
        centermarker.addEventListener("dragend",attribute);
    },10);
    function attribute() {
        var p = centermarker.getPosition();  //获取marker的位置
        $("#boardlng").val(p.lng);
        $("#boardlat").val(p.lat);
    }
</script>
</html>